<template>
  <div class="city">
    <h1>
      <span class="iconfont icon-arrow-left-bold" @click="gotoback"></span>
      <span>所在城市 {{location}}</span>
    </h1>
    <!-- 城市详情 -->
    <div class="content">
      <div class="search">
        <input type="search" placeholder="输入想查询的城市" id="search" @keyup.enter="tilchooseCity()">
        <span class="iconfont icon-search" @click="tilchooseCity()"></span>
      </div>
      <h2>GPS定位你所在城市</h2>
      <div class="onecity" @click="chooseCity(location)">{{ location }}</div>
      <van-index-bar :index-list="indexList" highlight-color="#ff0000">
        <template v-for="item in dataList">
          <van-index-anchor :index="item.index" :key="item.index" style="background:#eee"></van-index-anchor>
          <van-cell @click="chooseCity(sub.name)" v-for="(sub,key) in item.data" :title="sub.name" :key="sub.name+key" />
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { cityListData } from '../../api/api'
//引入bamp百度地图
import { loadBMap } from "../../tool/loadMay";

export default {
  data() {
    return {
      //被索引城市列表
      dataList: [],
      //字母索引列表
      indexList: [],
      //当前城市
      theCity: '',
      // 保存百度地图实例
      BMap: null,
      geolocation: null, // Geolocation对象实例
      location: "定位中", // 位置信息
    };
  },
  async created() {
    // 获取城市的列表数据
    let res = await cityListData();
    this.dataList = res[0];
    this.indexList = res[1];
  },
  mounted() {
    window.initBaiduMapScript = () => {
      this.BMap = window.BMap;
      this.getLocation();
    };
    loadBMap("initBaiduMapScript");
  },
  methods: {
    // 获取选择的城市名称
    chooseCity: function(city){
      // 初始化城市地址为 深圳
      let cityId = 440300;
      // 在城市列表中匹配到对应的城市 ID
      this.dataList.forEach( item => {
        item.data.forEach(one => {
          if(one.name === city){
            cityId = one.cityId
          }
        })
      })
      console.log(city, cityId);
      this.$router.push("/cinema/"+cityId+"/"+city)
    },
    //搜索获取城市所在电影
    tilchooseCity() {
      console.log('aaa');
      let cityname = document.querySelector('input').value
      console.log(cityname);
      // 初始化城市地址为 深圳
      let cityId = 440300;
      // 在城市列表中匹配到对应的城市 ID
      this.dataList.forEach( item => {
        item.data.forEach(one => {
          if(one.name === cityname){
            cityId = one.cityId
          }
        })
      })
      console.log(cityname, cityId);
      this.$router.push("/cinema/"+cityId+"/"+cityname)
    },
    //返回上一页
    gotoback() {
      window.history.go(-1)
    },
    // 获取地理定位
    getLocation() {
      this.location = "定位中";
      this.geolocation = new this.BMap.Geolocation();
      if (this.geolocation) {
        // 获取用户位置信息
        this.geolocation.getCurrentPosition(
          // 回调函数获取返回地址
          (position) => {
            this.location = position.address.city;
          },
          // 配置相关参数
          {
            enableHighAccuracy: true, // 要求浏览器获取最佳结果
            timeout: 30, //    超时时间
            maximumAge: 0, // 允许返回指定时间内的缓存结果。如果此值为0，则浏览器将立即获取新定位结果
          }
        );
      } else {
        this.location = "地址获取失败";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.city {
  //标题
  h1 {
    line-height: 1.1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 12;
    background-color: red;
    color: #fff;
    text-align: center;
    display: flex;
    span:first-child {
      font-size: .5rem;
      margin: 0 1.9rem 0 .2rem;
    }
    span:last-child {
      font-size: .35rem;
    }
  }
  //城市详情
  .content {
    margin-top: 1.1rem;
    width: 100%;
    .search {
      display: flex;
      height: 1rem;
      align-items: center;
      padding: 0 .3rem;
      background-color: rgb(230, 230, 230);
      justify-content: center;
      font-size: .3rem;
      input {
        outline: none;
        border: none;
        height: .6rem;
        margin-right: .2rem;
        padding-left: .2rem;
        border-radius: .2rem;
      }
      span {
        color:red;
        font-size:.4rem;
        font-weight: 900
      }
    }
    h2 {
      padding: .3rem;
      color: gray;
      font-size: .28rem;
    }
    .onecity {
      background-color: rgb(241, 241, 241);
      width: 1.5rem;
      line-height: .8rem;
      margin: 0 0 .3rem .3rem;
      text-align: center;
      font-size: .3rem;
    }
  }
}
</style>